<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>

    <div>------------</div>
    <div>请输入电话号码:</div>
    <textarea name="" id="phoneInput" cols="30" rows="10"></textarea>
    <div>
        <button id="getOrder">进行排序</button>
        <button id="copy">复制</button>
        <button id="clear">清空</button>
    </div>
    <div>
        <button id="getVcf">生成通讯录</button>
    </div>
</body>
<script src="main.js"></script>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script>
    $(function () {

        let lashHash = null;
        let currentHash = null;
        // ----------------------------------
        var sock = new SockJS('http://localhost:9999/node-socket');
        sock.onopen = function () {
            console.log('socket onopen');
        };

        sock.onmessage = function (e) {
            let data = JSON.parse(e.data)
            if (data) {
                console.log('message', data);
                msgHandler(data);
            }
        };

        let msgHandler = function (data) {
            handlerObj = {
                ok: function () {
                    handlerUpdate()
                },
                hash: function (hash) {
                    if (currentHash != hash) {
                        lashHash = currentHash;
                        currentHash = hash;
                    }
                }
            }
            handlerObj[data.type](data.value);
        }

        sock.onclose = function () {
            console.log('close');
        };
        // --------  处理更新内容 ---------
        let handlerUpdate = async function (hash) {
            if (!lashHash) return Promise.resolve(hash)
            let update = await request(`http://localhost:8080/${lashHash}.hot-update.json`);

            let domain = Object.keys(update.c).find(key => update.c[key])

            const script = document.createElement('script');
            script.src = `http://localhost:8080/${domain}.${lashHash}.hot-update.js`;
            document.body.append(script)
        }

        let request = function (url) {
            return new Promise(function (resolve, reject) {
                fetch(url).then(response => {
                    resolve(response.json())
                })
            })
        }
        // ----------------------
        $('#getOrder').click(function () {
            let phoneInput = $('#phoneInput').val();
            fetch('/phone/space', {
                method: "POST",
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    phone: phoneInput
                })
            }).then(res => {
                res.json()
                    .then(function (data) {
                        $("#phoneInput").val(data);
                    })

            })
        })

        $('#copy').click(function () {
            var Url2 = document.getElementById("phoneInput");//获取文本框id
            Url2.select(); // 选择对象用户定义的代码区域
            document.execCommand("Copy"); //原生copy方法执行浏览器复制命令
        })
        $('#clear').click(function () {
            $("#phoneInput").val('');
        })


        $('#getVcf').click(function(){
            let phoneInput = $('#phoneInput').val();
            fetch('/phone/vcf', {
                method: "POST",
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    phone: phoneInput
                })
            }).then(res => {
                res.json()
                    .then(function (data) {
                        console.log(data)
                        window.open(data.url)
                    })

            })
        })
    })


</script>

</html>